<template>
  <div>
    <div class="search">
      <select v-model="value">
        <option value="" disabled selected style="display: none">
          请选择查找依据
        </option>
        <option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></option>
      </select>
      <el-input
        v-model="search"
        placeholder="请输入搜索内容"
        style="width: 20%"
      ></el-input>
      <el-button type="primary" @click="searchby">查找</el-button>
      <el-button type="primary" @click="backAll">返回总列表</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 99.9%" height="450">
      <el-table-column prop="ir_id" label="接种ID"> </el-table-column>
      <el-table-column prop="user_uid" label="用户ID"> </el-table-column>
      <el-table-column prop="user_account" label="用户账号"> </el-table-column>
      <el-table-column prop="user_username" label="用户名"> </el-table-column>
      <el-table-column prop="user_dept" label="部门"> </el-table-column>
      <el-table-column prop="count" label="接种次数"> </el-table-column>
      <el-table-column prop="booking_time" label="预约时间" ></el-table-column>
      <el-table-column prop="inoculate_time" label="接种时间" sortable>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
// axios.defaults.baseURL = "http://liyiqing.free.svipss.top";
axios.defaults.baseURL = "http://localhost:8888";
export default {
  name: "Inoculatetable",
  data() {
    return {
      search: "",
      tableData: [
        {
          uid: 1,
          account: 111,
          username: "and",
          password: "123",
        },
      ],
      form: {},
      options: [
        {
          value: "1",
          label: "用户ID",
        },
        {
          value: "2",
          label: "用户账号",
        },
        {
          value: "3",
          label: "用户名",
        },
        {
          value: "4",
          label: "接种次数",
        },
      ],
      value: "",
    };
  },
  created() {
    this.load();
  },
  methods: {
    // 渲染所有的用户信息
    load() {
      axios.get(`/inoculation/selectAllInoculation`).then((respose) => {
        this.tableData = respose.data.data;
        console.log(this.tableData);
      });
    },
    // 按条件查询
    searchby() {
      //按id查询
      if (this.value == 1) {
        this.form.userId = this.search;
        this.sendrequest();
      } else if (this.value == 2) {
        this.form.userAccount = this.search;
        this.sendrequest();
      } else if (this.value == 3) {
        this.form.username = this.search;
        this.sendrequest();
      } else if (this.value == 4) {
        this.form.count = this.search;
        this.sendrequest();
      } else if (this.value == 5) {
        this.form.inoculateDate = this.search;
        this.sendrequest();
      }
    },
    // 发送请求函数
    sendrequest() {
      console.log(this.form);
      axios
        .post(`/inoculation/selectInoculationByArg`, this.form)
        .then((respose) => {
          this.tableData = respose.data.data;
          this.form = {};
        });
    },
    // 返回总列表
    backAll() {
      this.load();
    },
  },
};
</script>

<style scoped>
.search {
  padding: 10px;
  /* width: 230px; */
}
select {
  width: 150px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  line-height: 40px;
  font-size: 13px;
}
</style>